<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="<%=path %>/static/css/css.css?1" />
<link rel="stylesheet" type="text/css" href="<%=path %>/static/jquery-ui/jquery-ui.min.css" />
<script type="text/javascript" src="<%=path %>/static/js/json2.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/static/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=path %>/static/layer/layer.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/gridview.js?v=1"></script>
<script type="text/javascript" src="<%=path %>/static/js/formview.js?v=1"></script>
<script type="text/javascript" src="<%=path %>/static/js/tool.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/validate.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/echarts.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/loadingDiv.js"></script>
</head>

<body>
<ul class=tab_nav>
  <li>
    <a class="current" href="javascript:void(0)">数据报表</a>
  </li>
</ul>
<div class="contrainer">
   <table class="mtable" style="margin-top:15px;">
      <tr>
         <th>今日分享总量</th>
         <th>今日点击总量</th>
         <th>今日点击率</th>
         <th>今日消耗总额</th>
      </tr>
      <tr style="text-align:center">
         <td id="shareCnt"></td>
         <td id="readCnt"></td>
         <td id="clickRate"></td>
         <td id="conMoney"></td>
      </tr>
   </table>

<div id="formview" class="rbox1"></div>
<div style="padding:0 10px;overflow:hidden">
<div style="background:#fff;overflow:hidden">
<div id="ec_line" style="width:100%;height:300px;margin-top:15px;">
</div>
</div>
</div>
<div class="rcon2" >
      <table class="search_tb">
         <tr>
            <td style="padding-left:15px;">
               <input type="text" name="title" placeholder="标题" style="float:left;" />
               <input type="button" class="searchbtn" value="" id="queryBtn" style="float:left;">

            </td>
         </tr>
      </table>
</div>
<div id="list" class="rcon2">

</div>
</div>
<script type="text/javascript" src="<%=path %>/static/js/underscore.js"></script>
<script type='text/javascript' src='<%=path %>/static/My97DatePicker/WdatePicker.js'></script>
<script type='text/javascript' src='<%=path %>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=path %>/dwr/util.js'></script>
<script type='text/javascript' src='<%=path %>/dwr/interface/BaseDwr.js'></script>
<script>
   $.ajaxSetup({
      async: false
   });
   var gridSetting = {
   			id:'qhtaskGrid',
   			po:"QhTask",
   			title:'',
   			height:'auto',
   			service:"uiServices!listSimple",
   			tbId:"TaskTb",
   			hideCheckbox:true,
   			pageInfo: {
   				records: 12,//auto表示根据容器高度自动判断
   				orderby : "id desc"
   			},
   			oper:{
                isDisplay:false,
               	operName:"",
               	url:"",
               	cssClass:"Operation",
               	width:80
            },
   			fields:[
   			   {	name:'id',
   					hide:true
   			   },{
                       name: 'id',
                       descs:"ID",
                       align:'center',
                       thstyle:"width:60px"
                  },
                  {
   				   name: 'title',
   				   descs:"标题",
   				   align:'left'
   			   },{
                      name: 'shareCnt',
                      descs:"分享量",
                      align:'center',
                      thstyle:"width:100px"
                  }
   			   ,{
   				   name: 'readCnt',
   				   descs:"点击量",
   				   align:'center',
   				   thstyle:"width:100px"
   			   }
   			   ,{
                  	   name: 'clickRate',
                  	   descs:"点击率%",
                  	   align:'center',
                  	   thstyle:"width:100px"
                  }
                  ,{
                      name: 'spend',
                      descs:"花费",
                      align:'center',
                      thstyle:"width:100px"
                  }
   			]
   };
   var grid;
   $(function(){
      grid = new GridView("list",gridSetting,"list");
      grid.init();
      var data = [];
      grid.load({data:data});

      $.getJSON("<%=path %>/public/common/getDataSta.htmls",{},function(data){
         var clickRate;
         if(data.shareCnt==0){
            clickRate="0%";
         }
         else{
            clickRate=data.readCnt/data.shareCnt;
            clickRate=clickRate*100;
            clickRate=clickRate.toFixed(2)+"%";
         }
         $("#shareCnt").text(data.shareCnt);
         $("#readCnt").text(data.readCnt);
         $("#clickRate").text(clickRate);
         $("#conMoney").text(data.conMoney);
      });

      loadChart();
      $("#queryBtn").click(function(){
         var data=[];
         var Title = $(".search_tb").find(":input[name=title]").val();
         if(Title!==""){
            data.push({r:"like",name:'title',value:"%"+Title+"%"});
         }
         grid.load({data:data});
      });

   });

   function loadChart(){
      myLoading.showLoading(true);

      $.getJSON("<%=path %>/public/common/getDataChart.htmls",{},function(data){
         myLoading.showLoading(false);
         var xData=[],series=[];
         var cntData1=[],cntData2=[];
         $.each(data,function(i,item){
            xData.push(item.datetime);
            cntData1.push(item.readCnt);
            cntData2.push(item.shareCnt);

         });
         series.push({name:'点击量',type:'line',stack: '总量',data:cntData1});
         series.push({name:'分享量',type:'line',stack: '总量',data:cntData2});
         var myChartLine = echarts.init(document.getElementById('ec_line'));
         lineoption = {
            title: {
               text: '投放趋势图'
            },
            tooltip: {
               trigger: 'axis'
            },
            legend: {
               data:['点击量','分享量']
            },
            grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
            },
            toolbox: {
               feature: {
                  saveAsImage: {}
               }
            },
            xAxis: {
               type: 'category',
               boundaryGap: false,
               data: xData
            },
            yAxis: {
               type: 'value'
            },
            series: series
         };
         myChartLine.setOption(lineoption);
      });

   }

   function afterLoad_TaskTb(){
      $(".rcon2 .mtable tbody tr").each(function(){
         var id=$(this).attr("recordid");

         $shareCnt=$(this).find("td[name=shareCnt]");
         $readCnt=$(this).find("td[name=readCnt]");
         $clickRate=$(this).find("td[name=clickRate]");
         $spend=$(this).find("td[name=spend]");
         $.getJSON(g_path+"/public/common/getTaskShareById.htmls",{id:id},function(data){

            $shareCnt.text(data.sharecnt);
            $readCnt.text(data.readcnt);
            var per;
            if(data.sharecnt==0){
               per="0%";
            }
            else{
               per=data.readcnt/data.sharecnt;
               per=(per*100).toFixed(2);
            }
            $clickRate.text(per);
            $spend.text(data.spend);
         });
         html="<a href=<%=path %>/public/common/r2.htmls?page=count/data_report1&id="+id+">"+$(this).find("td[name=title]").text()+"</a>";
         $(this).find("td[name=title]").html(html);
      });
   }

</script>
</body>
</html>